<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的相册</title>
    <style>
        li{
            list-style: none;
        }
    </style>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/album.css">
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-3.5.0.min.js"></script>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrap">
    <!---个人博客--->
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        <a class="navbar-brand" href="index.html">我的个人博客</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Blog_tech.html">博文技术</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="album.html">我的相册</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Rest.html">休息娱乐</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <div class="row">
            <div class="flex col-sm-12 col-md-12 col-lg-5 animated wobble">
                <h3>flex相册_动物世界</h3>
                <ul class="photo">
                    <li><img src="images/animal1.jpg" height="146" width="100"/></li>
                    <li><img src="images/animal2.jpg" height="146" width="100"/></li>
                    <li><img src="images/animal3.jpg" height="146" width="100"/></li>
                    <li><img src="images/animal4.jpg" height="146" width="100"/></li>
                    <li><img src="images/animal5.jpg" height="146" width="100"/></li>
                    <li><img src="images/animal6.jpg" height="146" width="100"/></li>
                    <li><img src="images/animal7.jpg" height="146" width="100"/></li>
                    <li><img src="images/animal8.jpg" height="146" width="100"/></li>

                </ul>
            </div>

            <div class="float col-sm-12 col-md-12 col-lg-7 animated bounce">
                <h3>float相册_花花世界</h3>
                <ul class="photo">
                    <li><img src="images/1.jpg" height="146" width="100"/></li>
                    <li><img src="images/2.jpg" height="146" width="100"/></li>
                    <li><img src="images/3.jpg" height="146" width="100"/></li>
                    <li><img src="images/4.jpg" height="146" width="100"/></li>
                </ul>
                <p class="p animated flash" style="font-size: 20px; font-weight: bold; text-align: center;">用发现美的眼睛看世界！</p>
                <p class="p animated flash" style="font-size: 20px; font-weight: bold; text-align: center">你会发现世界真的很美！</p>
            </div>

            <div class="column col-sm-12 col-md-12 col-lg-12 animated pulse">
                <h3>column相册_风景世界</h3>
                <ul class="photo">
                    <li><img src="images/view1.jpg" height="146" width="100"/></li>
                    <li><img src="images/view2.jpg" height="146" width="100"/></li>
                    <li><img src="images/view3.jpg" height="146" width="100"/></li>
                    <li><img src="images/view4.jpg" height="146" width="100"/></li>
                    <li><img src="images/view5.jpg" height="146" width="100"/></li>
                    <li><img src="images/view6.jpg" height="146" width="100"/></li>
                    <li><img src="images/view7.jpg" height="146" width="100"/></li>
                    <li><img src="images/view8.jpg" height="146" width="100"/></li>
                </ul>
            </div>
        </div>
    </div>

    <!---页脚--->
    <div class="foot">
        <footer>Copyright@wangdeling</footer>
    </div>
</div>
</body>
</html>